<template>
  <div class="detailDialog">
    <el-dialog
      :close-on-click-modal="false"
      title="详情"
      :visible.sync="detailData.isShow"
      width="50%"
    >
      <h3>关联课程列表（{{ total }}）</h3>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        ref="leftTable"
        header-cell-class-name="tab-head"
        height="490"
      >
        <el-table-column label="序号" width="120" align="center" type="index">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          min-width="130"
          align="center"
        ></el-table-column>
        <el-table-column label="所属学院" width="120" align="center">
          <template slot-scope="scope" v-if="scope.row.college">
            <span>{{ scope.row.college.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程类型" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.type | filterClass('courseType')">{{
              scope.row.type | filterName('courseType')
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </el-dialog>
  </div>
</template>
<script>
import { getMessageCourseDetail } from '@/api/appSetting/swiftMessage'
export default {
  props: ['detailData'],
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        id: '',
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      }
    }
  },
  watch: {
    detailData: {
      handler(NewVal) {
        this.searchParams.id = NewVal.id
        this.searchList()
      }
    }
  },
  methods: {
    searchList() {
      this.loading = true
      getMessageCourseDetail(this.searchParams, (res) => {
        this.loading = false
        const { rows, total } = res
        this.tableData = rows
        this.total = total
      })
    }
  }
}
</script>
<style lang="less"></style>
